<!-- 多语言切换 -->
<template>
	<div class="lang">
		<el-popover :placement="placement" :width="160">
			<div class="c1">
				<el-button size="medium"
					@click="handleSetLanguage('zh')" 
					:disabled="language == 'zh'">中文
				</el-button>
			</div>
			<div class="c1">
				<el-button size="medium"
					@click="handleSetLanguage('en')" 
					:disabled="language == 'en'">English
				</el-button>
			</div>
		   <template #reference>
				<div class="c7">
					<div v-if="language == 'zh'">En</div>
					<div v-if="language == 'en'">中</div>
				</div>
		   </template>
		</el-popover>
	</div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

defineProps({
  placement: {
	  type:String,
	  default:"top"
  },
})



// 切换事件：
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const handleSetLanguage = (lang) => {
	locale.value = lang;
　　language.value = lang;
　　localStorage.setItem('lang', lang);
　　location.reload();
};

//页面加载判断语言
const language = ref('');
onMounted(()=>{
　　if(localStorage.getItem('lang') == undefined || localStorage.getItem('lang') == 'zh') {
 　　　　language.value = 'zh';
　　} else {
 　　　　language.value = 'en';
　　}
})
</script>

<style lang="scss" scoped>
	.lang{
		
		.c7{width: 40px;height: 40px;text-align: center;line-height: 40px;border-radius: 40px;background: var(--el-color-primary);color: #fff;cursor: pointer;}
	}
	.c1{margin: 5px auto;}
	.c1 .el-button{width: 100%;}

</style>
